<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>图书管理界面</title>

    <!-- Bootstrap -->
    <link href="/books/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="/books/vendors/nprogress/nprogress.css" rel="stylesheet">
    <!-- iCheck -->
    <link href="/books/vendors/iCheck/skins/flat/green.css" rel="stylesheet">

    <!-- Custom Theme Style -->
    <link href="/books/build/css/custom.min.css" rel="stylesheet">
</head>

<body class="nav-md">
    <div class="container body">
        <div class="main_container">
            <!-- page content -->
            <div class="">
                <div class="page-title">
                    <a href="/user/home">
                        <div class="title_left" style="margin-left: 2%;">
                            <h3><small>图书前端页面</small></h3>
                        </div>
                    </a>

                    <!-- 搜索框 -->
                    <div class="title_right">
                        <div class="col-md-5 col-sm-5   form-group pull-right top_search">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search for...">
                                <span class="input-group-btn">
                                  <button class="btn btn-secondary" type="button">搜索</button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="x_panel">

                            <div class="x_content">

                                <p>可以对图书进行增加和删除功能</p>
                                <a href="/book/addBook" class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i> 添加 </a>
                                <!-- start project list -->
                                <table class="table table-striped projects">
                                    <thead>
                                        <tr>
                                            <th style="width: 26%;">图书名称</th>
                                            <th style="width: 15%;">作者</th>
                                            <th style="width: 25%;">出版社</th>
                                            <th style="width: 15%;">出版日期</th>
                                            <th style="width: 6%;">库存数量</th>
                                            <th style="width: 12%">编辑</th>
                                        </tr>
                                    </thead>
                                    <tbody class="books-content">

                                    </tbody>
                                </table>
                                <!-- end project list -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /page content -->
    </div>
</body>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript"  th:inline="javascript">

    var library = [[${booksInfo}]];
    var books = []
    for(let i = 0;i < [[${booksInfo.size()}]]; i++){
        const book_name = library[i][0];
        const book_press = library[i][1];
        const book_author = library[i][2];
        const book_date = library[i][3];
        const book_number = library[i][4];
        const book_image = library[i][5];
        // const book_image = 'http://localhost:8080/img/' + library[i][5];
        const book_id = library[i][6];

        books.push({
            name: book_name,
            press: book_press,
            author: book_author,
            date: book_date,
            number: book_number,
            imgUrl: book_image,
            id:book_id
        })
    }

    var x;
    for (x in books) {
        document.getElementsByClassName("books-content")[0].innerHTML +=
            '<tr id="book_' + books[x].id + '">' +
            '<td>' + books[x].name + '</td>' +
            '<td>' + books[x].author + '</td>' +
            '<td>' + books[x].press + '</td>' +
            '<td>' + books[x].date + '</td>' +
            '<td>' + books[x].number + '</td>' +
            '<td>' +
            '<a id="' + books[x].id + '" href="/book/modifyBook/' + books[x].name + '/'+ books[x].author + '/'+ books[x].press +'/'+  books[x].date + '/'+ books[x].number + '" class="btn btn-info btn-xs" onclick="modifyBook(this)"><i class="fa fa-pencil"></i>编辑</a>' +
            // '<a id="' + books[x].id + '" th:href="@{/book/modifyBook(book_name=${books[x].name},book_author=${books[x].author},book_press=${books[x].press},book_date=${books[x].date},book_number=${books[x].number}, book_image=${books[x].imgUrl})}" class="btn btn-info btn-xs" onclick="modifyBook(this)"><i class="fa fa-pencil"></i>编辑</a>' +
            '<button id="' + books[x].id + '" class="btn btn-danger btn-xs" type="submit" onclick="deleteBook(this)"><i class="fa fa-trash-o"></i>删除</button>' +
            '</td>' +
            '</tr>'
    }

    function modifyBook(event) {
        var book_id = event.id;
        alert(book_id)
        $.ajax({
            url: "/book/bmodifyBook",
            data: {
                book_id: book_id,
                books_info:[[${booksInfo}]]
            },
            dataType: "json",
            success: function () {

            },
            error: function () {
                alert("页面跳转失败");
            }
        });
        // $('#book_' + [[book_id]] + [[book_name]]).text([[book_name]]);
        // $('#book_' + [[book_id]] + [[book_author]]).text([[book_author]]);
        // $('#book_' + [[book_id]] + [[book_press]]).text([[book_press]]);
        // $('#book_' + [[book_id]] + [[book_date]]).text([[book_date]]);
        // $('#book_' + [[book_id]] + [[book_number]]).text([[book_number]]);
    }

    function deleteBook(event) {
        // alert("运行了udeleteBook")
        $("#book_" + event.id).remove();
        var book_id = event.id;
        // alert(event.id)
        $.ajax({
            url: "/book/udeleteBook",
            type: "POST",
            data: {
                book_id: book_id,
                books_info: [[${booksInfo}]]
            },
            dataType: "json",
            success: function (data) {
                if (data.status == "success") {
                    // alert("删除成功");
                    $("#book_" + event.id).remove();
                }
            },
            error: function (data) {
                // alert("删除失败");
            }
        });
    }
</script>

</html>